<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .list-title{
            padding: 0;
            margin: 56px 0 20px 0;
            font-size: 22px;
            color: #333333;
        }
        .col-md-6{
            display: block;
            float: left;
        }
        .thumbnail>img{
            width: 300px;
        }
        .caption>p>b{
            color: #F1393A;
            font-size: 45px;
            font-family: DIN-Medium, DIN;
        }
        .caption>p>a{
            list-style: none;
            width: 145px;
            height: 58px;
            line-height: 48px;
            text-align: center;
            font-size: 20px;
            border: none;
            color: #fff;
            background: linear-gradient(
                    161deg, #F96B6C 0%, #F1393A 100%);
            border-radius: 26px;
            cursor: pointer;
            display: block;
            float: right;
        }
        #d1{
            margin-top: 60px;
        }
    </style>
    <!--    引入首页样式-->
    <link rel="stylesheet" type="text/css" href="indexCss.css">

</head>
<body>


<!--正文分布式4-4-4-->
<div class="container ">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div  id="d1">
                    <div class="col-md-12 column img1">
                        <img :style="position: relative;left: "  alt=""  id="img1-1" src="http://www.sinoiov.com/skin/new/img/icon_index_truck.png">
                        <img id="img1-2" src="http://www.sinoiov.com/skin/new/img/icon_satellite.png" alt="">
                    </div>
                </div>
        </div>
    </div>
</div>

<div class="container" >
    <div class="row clearfix">
        <div class="col-md-4 column">
            <a href=""><img style="width: 100%;" src="http://www.sinoiov.com/skin/new/img/mall/oil.jpg" alt=""></a>
        </div>
        <div class="col-md-4 column">
            <a href=""><img style="width: 100%;" src="http://www.sinoiov.com/skin/new/img/mall/tyre.jpg" alt=""></a>
        </div>
        <div class="col-md-4 column">
            <a href=""><img style="width: 100%;" src="http://www.sinoiov.com/skin/new/img/mall/tail-gas.jpg" alt=""></a>
        </div>
    </div>
    <div class="list-title">
        热销商品
    </div>
    <div class="row">
        <div class="col-sm-4 col-md-4">
            <div class="thumbnail">
                <img src="http://www.sinoiov.com/skin/new/img/mall/thumb-10000-1.png"
                     alt="通用的占位符缩略图">
                <div class="caption">
                    <h3>轮胎</h3>
                    <p>轻重型卡车货车钢丝轮胎700/750/825/900/1000/1100/1200-R16 R20 12.00R20 矿山花1</p>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 80%;background-color: #F1393A">
                            <span>已售600件</span>
                            <span style="float: right">仅剩133件</span>
                        </div>
                    </div>
                    <p>
                        <b>￥1668</b>
                        <a href="#" class="btn btn-default" role="button">
                            去抢购
                        </a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-4">
            <div class="thumbnail">
                <img src="http://www.sinoiov.com/skin/new/img/mall/thumb-10000-1.png"
                     alt="通用的占位符缩略图">
                <div class="caption">
                    <h3>轮胎</h3>
                    <p>轻重型卡车货车钢丝轮胎700/750/825/900/1000/1100/1200-R16 R20 12.00R20 矿山花1</p>
                    <div class="progress">
                        <div :style="'width:' +(((c.salesnum+50)/c.sum)*100) +'%;'" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
                             class="progress-bar progress-bar-success" role="progressbar" style="background-color:#F1393A" >
                            <span>已售600件</span>
                            <span style="float: right">仅剩133件</span>
                        </div>
                    </div>
                    <p>
                        <b>￥1668</b>
                        <a href="#" class="btn btn-default" role="button">
                            去抢购
                        </a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-4">
            <div class="thumbnail">
                <img src="http://www.sinoiov.com/skin/new/img/mall/thumb-10000-1.png"
                     alt="通用的占位符缩略图">
                <div class="caption">
                    <h3>轮胎</h3>
                    <p>轻重型卡车货车钢丝轮胎700/750/825/900/1000/1100/1200-R16 R20 12.00R20 矿山花1</p>
                    <div class="progress">
                        <div :style="'width:' +(((c.salesnum+50)/c.sum)*100) +'%;'" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
                             class="progress-bar progress-bar-success" role="progressbar" style="background-color:#F1393A" >
                            <span>已售600件</span>
                            <span style="float: right">仅剩133件</span>
                        </div>
                    </div>
                    <p>
                        <b>￥1668</b>
                        <a href="#" class="btn btn-default" role="button">
                            去抢购
                        </a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-4">
            <div class="thumbnail">
                <img src="http://www.sinoiov.com/skin/new/img/mall/thumb-10000-1.png"
                     alt="通用的占位符缩略图">
                <div class="caption">
                    <h3>轮胎</h3>
                    <p>轻重型卡车货车钢丝轮胎700/750/825/900/1000/1100/1200-R16 R20 12.00R20 矿山花1</p>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 80%;background-color: #F1393A">
                            <span>已售600件</span>
                            <span style="float: right">仅剩133件</span>
                        </div>
                    </div>
                    <p>
                        <b>￥1668</b>
                        <a href="#" class="btn btn-default" role="button">
                            去抢购
                        </a>

                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-4">
            <div class="thumbnail">
                <img src="http://www.sinoiov.com/skin/new/img/mall/thumb-10000-1.png"
                     alt="通用的占位符缩略图">
                <div class="caption">
                    <h3>轮胎</h3>
                    <p>轻重型卡车货车钢丝轮胎700/750/825/900/1000/1100/1200-R16 R20 12.00R20 矿山花1</p>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 80%;background-color: #F1393A">
                            <span>已售600件</span>
                            <span style="float: right">仅剩133件</span>
                        </div>
                    </div>
                    <p>
                        <b>￥1668</b>
                        <a href="#" class="btn btn-default" role="button">
                            去抢购
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>



</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入瀑布流相关js文件-->
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.js"></script>

<!--背景线条-->
<script src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js" type="text/javascript"></script>　
<!--右键出字体-->
<script src="admin/adminjs/bgfont.js"></script>　
<!--引入footer-->
<script src="adminjs/footer.js"></script>
<!--引入header-->
<script src="adminjs/header.js"></script>
</body>
</html>